<template>
<div id="wrap">
  <div id="market-list" class="content-block">
    <input placeholder="输入关键字" id="search" class="form-control input-lg"/>
    <span class="search-btn">搜索</span>
    <scroller style="margin-top:40px;" ref="marketSampleList"
      :on-refresh="refreshMarketSampleList"
      :on-infinite="infiniteMarketSampleList">
    <swiper dots-position="center" style="height: 180px;" loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
    <divider>校园二手</divider>
      <!-- content goes here -->
      <div>
          <div class="market-category">
            <van-card v-for="(item, index) in prodctItems" :key="item.id"
              :title="(item.productName)"  
              :desc="(item.productDes)"
              num="2"
              :price="(item.productPrice)"
              :thumb="(item.productLogo)">
              <div slot="footer">
                <button class="detail-btn"  style="" @click="showBase = true">详情</button>
              </div>
            </van-card>
            <div style="clear:both"></div>
          </div>
      </div>
    </scroller>
    <div class="sku-container" style="">
        <van-sku style=""
          v-model="showBase"
          :sku="sku"
          :goods="goods"
          :goods-id="goodsId"
          :hide-stock="sku.hide_stock"
          :reset-stepper-on-hide="resetStepperOnHide"
          :disable-stepper-input="disableStepperInput"
          @buy-clicked="handleBuyClicked"
          @add-cart="handleAddCartClicked">
        </van-sku>
    </div>
    </div>
</div>
</template>

<script>

const baseList = [{
  url: 'javascript:',
  img: 'http://36588.com.cn/website/upload/goods/2014/8/7/0f63db3c-228f-4368-ac3b-71e319bcd3b9.jpeg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/2.jpg',
  title: '送你一辆车'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '送你一次旅行'
}]

const urlList = baseList.map((item, index) => ({
  url: '/aboutUs',
  img: item.img,
  title: `${item.title}`
}))

import FlyrayTabbar from '@/components/FlyrayTabbar'
import { Grid, GridItem, Search, Swiper, Divider } from 'vux'
import { Card, Button, Sku } from 'vant'
import 'vant/lib/vant-css/index.css'
import Vue from 'vue'
Vue.component(Sku.name, Sku)
Vue.component(Card.name, Card)
Vue.component(Button.name, Button)
import * as utils from '../utils/utils'
import { getAuthInfo } from '../utils/common'

export default {
  components: {
    Grid,
    GridItem,
    Search,
    Swiper,
    Divider,
    FlyrayTabbar
  },
  data () {
    return {
      items: [],
      demo06_list: urlList,
      demo06_index: 0,
      sku: {
        'tree': [{
          'k': '颜色',
          'v': [{
            'id': '30349',
            'name': '红色',
            'imgUrl': 'https://static.vux.li/demo/3.jpg'
          }, {
            'id': '1215',
            'name': '蓝色',
            'imgUrl': 'https://static.vux.li/demo/3.jpg'
          }],
          'k_s': 's1'
        }],
        'list': [{
          'id': 2259,
          'price': 100,
          's1': '1215',
          's2': '1193',
          's3': '0',
          'stock_num': 110
        }],
        'price': '1.00',
        'stock_num': 227,
        'collection_id': 2261,
        'none_sku': false,
        'messages': [{
          'datetime': '0',
          'multiple': '0',
          'name': '留言',
          'type': 'text',
          'required': '1'
        }],
        'hide_stock': false
      },
      goods: {
        'title': '测试商品',
        'picture': 'https://static.vux.li/demo/3.jpg'
      },
      goodsId: '946755',
      messages: {
        message_0: '12',
        message_1: ''
      },
      cartMessages: {
        '留言1': 'xxxx'
      },
      selectedNum: 1,
      selectedSkuComb: {
        id: 2257,
        price: 100,
        s1: '30349',
        s2: '1193',
        s3: '0',
        stock_num: 111
      },
      showBase: false,
      resetStepperOnHide: false,
      disableStepperInput: false,
      prodctItems: [],
      currentPage: 0
    }
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted: function () {
    console.log('圆面积：' + utils.area(4))
    console.log('圆周长：' + utils.circumference(14))
    for (var i = 1; i <= 5; i++) {
      this.items.push(i + ' - keep walking, be 2 with you.')
    }
    this.top = 1
    this.bottom = 5
  },
  methods: {
    handleBuyClicked: function () {
      this.$router.push('/payform')
    },
    handleAddCartClicked: function () {
      this.showBase = false
    },
    refreshMarketSampleList: function (done) {
      console.log('下拉刷新二手市场数据')
      var self = this
      setTimeout(function () {
        self.prodctItems = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            '2323': '33',
            'orgNo': 'orgNo',
            'lastName': 'orgNo',
            'email': 'orgNo',
            'currentPage': '0',
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/market/products/list', config).then(function (response) {
          console.log(response)
          console.log(response.data.pagination.currentPage)
          self.currentPage = response.data.pagination.currentPage + 1
          self.prodctItems = response.data.data
        }).catch(function (error) {
          console.log(error)
        })
        self.noData = false
        self.$refs.marketSampleList.finishInfinite(false)
        self.top = self.top - 10
        done()
      }, 500)
    },
    infiniteMarketSampleList: function (done) {
      console.log('上拉加载二手市场数据')
      console.log('infiniteMarketSampleList')
      var self = this
      if (this.noData) {
        this.$refs.marketSampleList.finishInfinite(true)
        return
      }
      setTimeout(function () {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            '2323': '33',
            'orgNo': 'orgNo',
            'lastName': 'orgNo',
            'email': 'orgNo',
            'currentPage': self.currentPage,
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/market/products/list', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noData = '没有更多数据'
            return
          }
          var data = response.data.data
          for (var i = 0; i < data.length; i++) {
            self.prodctItems.push(data[i])
          }
        }).catch(function (error) {
          console.log(error)
        })
        self.bottom = self.bottom + 10
        done()
      }, 500)
    },
    demo06_onIndexChange (index) {
      this.demo06_index = index
    }
  }
}
</script>

<style scoped>

.detail-btn{
  color: #fff;
  background-color: #ff6769;
  display: inline-block;
  width: 50px;
  border-radius: 3px;
  height: 22px;
  line-height: 22px;
  font-size: 10px;
  border: 1px solid #ff6769;
}

.product-wrap{
  padding:5px
}

.product-img-wrap{
  width:30%;
  float: left;
  height: 118px;
}

.product-img{
  height: 118px;
  width:100%;
}

.product-intro-wrap{
  width:70%;
  float: left;
  height: 128px;
  text-align:left;
}

.product-intro{
  font-size:14px;
  font-family:Georgia, serif;
  color:#8a8a8a
}

.weui-grid {
  padding: 0 5px 0 5px !important;
}

.copyright {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
.market-category{
  text-align: center;
  background-position: center;
  color: #10c5b6;
  background-attachment: fixed;
  background-repeat:no-repeat; 
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}
.m-bar{
  color: #ff6769;
  border-color: #ff6769;
  border-radius: 4px;
  border: 1px solid;
  padding: 5px 20px 5px 20px;
}

#search{
  background: none; 
  outline:none;
  outline:medium;
}

.input-lg {
    height: 21px;
    margin:5px;
    width: 84%;
    padding: 3px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    border:1px solid #10c5b6;
}
.search-btn{
  background-color: rgb(16, 197, 182);
  color: rgb(255, 255, 255);
  display: block;
  float: right;
  border-radius: 3px;
  padding: 5px;
  width: 7%;
  margin: 5px 5px 0 0;
  text-align: center;
  font-size: 0.75rem;
  height: 19px;
  line-height: 19px;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
　color: #666;font-size:16px;
  line-height: 21px;
}
input:-moz-placeholder, textarea:-moz-placeholder {
　color:#666;font-size:16px;
  line-height: 21px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
　color:#666;font-size:16px;
  line-height: 21px;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
　color:#666;font-size:16px;
  line-height: 21px;
}
</style>
